<template>
  <div>
    <el-card class="input-manager">
      <!-- 搜索 -->
      <div slot="header" class="clearfix">
        <el-row>
          <el-col :span="8">
            <el-input
              placeholder="请输入内容"
              v-model="query.name"
              clearable
              @clear="getList()"
            />
          </el-col>
          <el-col :span="8">
            <el-button type="primary" icon="el-icon-search" @click="getList"
              >搜索</el-button
            >
          </el-col>
        </el-row>
      </div>
      <!-- 表格 -->
      <el-table :data="lists" style="width: 100%" border fit>
        <el-table-column type="index" label="序号" align="center" width="60" />
        <el-table-column prop="name" label="姓名" align="center" />
        <el-table-column
          prop="birthday"
          label="出生日期"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="{ row }">
            <span>
              {{ row.birthday | getBirthday }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="sex" label="性别" align="center">
          <template slot-scope="{ row }">
            <span>
              {{ row.sex | getSex }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="education" label="教育程度" align="center">
          <template slot-scope="{ row }">
            <span>
              {{ row.education | getEducation }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="address1"
          label="居住地址"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="mobile_phone"
          label="手机号"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column prop="status" label="申请状态" align="center">
          <template slot-scope="{ row }">
            <el-tag :type="row.status | statusTypeFilter">{{
              row.status | statusFilter
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280" align="center">
          <template slot-scope="{ row }">
            <el-button
              size="small"
              type="primary"
              @click="edit(row)"
              :disabled="row.status == 1 || row.status == 4 || row.status >= 5"
              >编辑</el-button
            >
            <el-button
              size="small"
              type="danger"
              @click="del(row.id)"
              :disabled="row.status == 1 || row.status == 4 || row.status >= 5"
              >删除</el-button
            >
            <el-button
              size="small"
              type="success"
              @click="SubmitToApprove(row.id)"
              :disabled="row.status == 1 || row.status == 4 || row.status >= 5"
              >提交审核</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <Pagination
        class="pagination"
        :pageNo.sync="query.pageNo"
        :curSizes.sync="query.pageSize"
        :total="total"
        @getList="getList"
      />
    </el-card>

    <!-- 编辑弹层 -->
    <el-dialog
      title="编辑申请管理"
      :visible.sync="dialogEditVisible"
      center
      width="40%"
    >
      <el-form :model="form">
        <el-form-item label="id" label-width="60" v-show="false">
          <el-input v-model="form.id" />
        </el-form-item>
        <el-form-item label="姓名" label-width="60">
          <el-input
            v-model="form.name"
            class="filter-item"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="性别" label-width="60" prop="sex">
          <el-select
            v-model="form.sex"
            class="filter-item"
            placeholder="Please select"
          >
            <el-option
              v-for="item in sexOptions"
              :key="item.key"
              :label="item.display_name"
              :value="item.key"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditVisible = false">取 消</el-button>
        <el-button type="primary" @click="update()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { loanList, loanUpdate, loanDelete, loanSubmitToApprove } from "@/api";
import { sexOptions } from "@/utils/selectData";
import Pagination from "@/components/pagination.vue";
export default {
  name: "input-manager",
  components: {
    Pagination,
  },
  data() {
    return {
      lists: [], // 展示数据
      total: 0, // 总条数
      // 请求数据
      query: {
        pageNo: 1, // 页码
        pageSize: 10, // 每页条数
        name: "", //查询条件
      },
      form: {
        id: "",
        name: "",
        sex: "",
      },
      sexOptions,
      dialogEditVisible: false, //编辑弹层
    };
  },
  methods: {
    getList() {
      loanList(this.query).then((res) => {
        let {
          code,
          data: {
            data: { data },
            rows,
          },
        } = res.data;
        if (code == 20000) {
          this.lists = data;
          this.total = rows;
        }
      });
    },
    // 编辑数据的获取
    edit(row) {
      this.dialogEditVisible = true; // 弹层显示
      this.form = Object.assign({}, row);
    },
    // 编辑提交数据
    update() {
      loanUpdate(this.form).then((res) => {
        let { code, data } = res.data;
        if (code === 20000) {
          this.dialogEditVisible = false; // 弹层隐藏
          this.getList(); // 重新调用查询
          this.form = {};
          this.$message.success(data);
        }
      });
    },
    // 删除
    del(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          loanDelete({ id }).then((res) => {
            let { code, data } = res.data;
            if (code === 20000) {
              this.getList(); // 重新调用查询接口
              this.$message.success(data);
            } else {
              this.$message.error(data);
            }
          });
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    // 提交审核
    SubmitToApprove(id) {
      loanSubmitToApprove({ id }).then((res) => {
        let { code } = res.data;
        if (code === 20000) {
          this.getList(); // 重新调用查询接口
          this.$message.success("提交成功!");
        }
      });
    },
    //分页
    handleSizeChange(size) {
      this.query.pageSize = size;
      this.query.pageNo = 1;
      this.getList();
    },
    handleCurrentChange(val) {
      this.query.pageNo = val;
      this.getList();
    },
  },
  filters: {
    getBirthday(data) {
      let myDate = new Date(data),
        year = myDate.getFullYear(),
        month = myDate.getMonth() + 1,
        date = myDate.getDate();
      //日期时间处理
      function conver(s) {
        return s < 10 ? "0" + s : s;
      }
      let dates = year + "-" + conver(month) + "-" + conver(date);
      return dates;
    },
    getSex(data) {
      switch (data) {
        case "man":
          return "男";
        case "woman":
          return "女";
        default:
          return data;
      }
    },
    getEducation(data) {
      switch (data) {
        case "college":
          return "大学";
        case "highschool":
          return "高中";
        default:
          return data;
      }
    },
    statusFilter(data) {
      switch (data) {
        case 0:
          return "进件状态";
        case 1:
          return "提交初审";
        case 2:
          return "初审通过";
        case 3:
          return "初审拒绝";
        case 4:
          return "提交终审";
        case 5:
          return "终审通过";
        case 6:
          return "终审拒绝";
        case 7:
          return "生成合同";
        default:
          return data;
      }
    },
    statusTypeFilter(data) {
      switch (data) {
        case 0:
          return "success";
        case 1:
          return "";
        case 2:
          return "success";
        case 3:
          return "danger";
        case 4:
          return "warning";
        case 5:
          return "success";
        case 6:
          return "danger";
        case 7:
          return "success";
      }
    },
  },
  mounted() {
    this.getList();
  },
};
</script>

<style scoped>
.input-manager {
  margin-top: 10px;
}
.pagination {
  margin: 20px 0px;
  float: right;
}
.el-input,
.el-select {
  width: 100%;
}
.el-button {
  margin-left: 20px;
}
</style>
